<template>
  <div class="beauty">
    <div class="title border-bottom">
      <div class="left">美装</div>
      <div class="right">
        <a href="#">
          <span>更多</span>
          <i class="iconfont">&#xe600;</i>
        </a>
      </div>
    </div>
    <div class="content">
      <div class="content-top">
        <div class="top-left border-right">
          <img src="http://img2.yidejia.com/6/2019/03/08/afc42cd40ed7.jpg" alt="">
        </div>
        <div class="top-right">
          <div class="top border-bottom">
            <img src="http://img2.yidejia.com/1/2019/03/08/1197cb907106.jpg" alt="">
          </div>
          <div class="bottom">
            <img src="http://img2.yidejia.com/5/2017/12/08/92595b86df2c.jpg" alt="">
          </div>
        </div>
      </div>
      <div class="content-center">
        <ul>
          <li class="border-topright" v-for="item of centerList" :key="item.id">
            <img :src="item.imgUrl" alt="">
          </li>
        </ul>
      </div>
      <div class="content-bottom border-top">
        <img src="https://img2.yidejia.com/4/2019/03/09/39a805bb28b5e.jpg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeBeauty',
  data () {
    return {
      centerList: [
        {
          id: '001',
          imgUrl: 'http://img2.yidejia.com/6/2019/03/09/8b2fdc1ea35.jpg'
        },
        {
          id: '002',
          imgUrl: 'http://img2.yidejia.com/3/2019/03/09/8b51eced84d.jpg'
        },
        {
          id: '003',
          imgUrl: 'http://img2.yidejia.com/5/2019/03/09/5717301bb026.jpg'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .beauty
    width 100%
    overflow hidden
    height 0
    padding-bottom 144.04%
    margin-top .2rem
    .title
      height .96rem
      line-height .96rem
      background #ffffff
      .left
        float left
        font-size .4rem
        font-weight 400
        &::before
          content ' '
          display inline-block
          width .07rem
          height .42rem
          background $bgColor
          position relative
          top .06rem
          margin 0 .12rem 0 .2rem
      .right
        float right
        font-size .325rem
        margin-right .25rem
        a
          color #9f9f9f
          span
            position: relative
            left .1rem
            top .02rem
          i
            float right
            font-size .65rem

    .content-top
      height 4.69rem
      .top-left
        float left
        width 50%
        height 100%
      .top-right
        width 50%
        height 100%
        float right
        .top,.bottom
          height 50%
    .content-center
      height 3.283rem
      ul
        height 100%
        display flex
    .content-bottom
      height 1.876rem
    img
      width 100%
      height 100%
</style>
